<script setup>
import * as echarts from 'echarts'
import {onMounted} from 'vue'
import {ref} from 'vue'
// --------------- 学生列表相关 ---------------
// 标签页数据
const tabs = ref(['未到校注册', '已到校注册', '全部名单'])
// 当前激活的标签
const currentTab = ref('未到校注册')

// 未到校注册学生数据（示例）
const student = ref({
  id: 3,
  name: 'LUXINPEI',
  applyTime: '2025-09-12 00:00:00',
  address: '四川省成都市郫都区天润路',
  status: '申请中'
})

// 已到校注册学生数据（示例）
const arrivedStudents = ref([
  {id: 1, name: '张三', arriveTime: '2025-09-12 09:30:00', address: '四川省成都市武侯区', status: '已到校'},
  {id: 2, name: '李四', arriveTime: '2025-09-12 10:15:00', address: '四川省成都市锦江区', status: '已到校'}
])

// 全部学生数据（示例）
const allStudents = ref([
  {id: 1, name: '张三', status: '已到校'},
  {id: 2, name: '李四', status: '已到校'},
  {id: 3, name: 'LUXINPEI', status: '未到校'}
])
function getNavigateType(studentId) {
  // 根据学生ID返回对应的导航类型
  switch(studentId) {
    case 1:
      return 'tyfxshq1';
    case 2:
      return 'tyfxshq2';
    case 3:
      return 'tyshqhchzl3';
    default:
      return 'tyfxshq2'; // 默认返回
  }
}
function navigateTo(type,StudentId) {
  let url = ''
  switch(type) {
    case 'tyfxshq1':
      url = '/teacher/demo/tyfxshq?studentId=' + StudentId
      break
    case 'tyfxshq2':
      url = '/teacher/demo/tyfxshq2?studentId=' + StudentId
      break
    case 'tyshqhchzl3':
      url = '/teacher/demo/tyshqhchzl3?studentId=' + StudentId
      break
    default:
      return
  }
  console.log('Navigating to:', url, 'Student ID:', StudentId)
  uni.navigateTo({
    url: url
  })
}

      //echarts使用：
      //1.准备容器（要求能用document获取，用id）,必须要有宽高
      // 2.在页面元素加载完后（生命周期），获取容器
      //3.用echarts初始化容器
      // 4.设置配置项，给初始化的容器添加内容，
      onMounted(() => {
        console.log('页面元素加载完成')
        const div = document.getElementById('text')
        const obj = echarts.init(div)
        const options = {
          // 提示框
          tooltip: {
            trigger: 'item'
          },
          // 图例
          legend: {
            top: '5%',
            left: 'center'
          },
          // 标题
          title: {
            text: '管辖范围学生返校率',
            left: 'center',
            top: 'bottom'
          },
          // 系列
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              // 标签
              label: {
                show: true,
                position: 'center',
                formatter: '78%',
                fontSize: 50,
                fontWeight: 'bold',
              },
              // 高亮
              emphasis: {
                label: {
                  show: true,
                  fontSize: 50,
                  fontWeight: 'bold',
                  formatter: '78%'
                }
              },
              // 引导线
              labelLine: {
                show: false
              },
              data: [
                {value: 78, name: '已返校'},
                {value: 22, name: '未返校'},
              ]
            }
          ]
        };
        obj.setOption(options)
      })
</script>

<template>
  <div class="stats-container">
    <!-- 页面标题 -->
    <h1>管辖范围学生返校率</h1>
    <div id="text" class="text"></div>
    <!-- 2. 学生列表（带标签页） -->
    <div class="list-box">
      <!-- 标签切换 -->
      <div class="tabs-nav">
        <!-- 遍历 tabs 数组，为每个标签创建一个导航项 -->
        <div
            v-for="tab in tabs"
            :key="tab"
            :class="{ 'nav-item': true, 'active': currentTab === tab }"
            @click="currentTab = tab"
        >
          {{ tab }}
        </div>
      </div>

      <!-- 未到校注册列表（示例） -->
      <div class="student-item" v-if="currentTab === '未到校注册'" @click="navigateTo('tyshqhchzl3',student.id)">
        <h3>{{ student.name }}</h3>
        <p>申请时间: {{ student.applyTime }}</p>
        <p>地址: {{ student.address }}</p>
        <p>状态: <span class="status-tag">{{ student.status }}</span></p>
      </div>

      <!-- 已到校注册列表（示例） -->
      <div v-else-if="currentTab === '已到校注册'" >
        <div class="student-item" v-for="item in arrivedStudents" :key="item.id" @click="navigateTo('tyfxshq'+item.id,item.id)">
          <h3>{{ item.name }}</h3>
          <p>返校时间: {{ item.arriveTime }}</p>
          <p>地址: {{ item.address }}</p>
          <p>状态: <span class="status-tag arrived">{{ item.status }}</span></p>
        </div>
      </div>

      <!-- 全部名单（示例） -->
      <div v-else-if="currentTab === '全部名单'">
        <div class="student-item" v-for="item in allStudents" :key="item.id"  @click="navigateTo(getNavigateType(item.id),item.id)">
          <h3>{{ item.name }}</h3>
          <p>状态: <span :class="['status-tag', item.status === '已到校' ? 'arrived' : '']">{{ item.status }}</span></p>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.stats-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

/* 图表容器样式 */
.text {
  width: 100%;
  height: 300px;
  margin-bottom: 32px;
}

/* 列表容器样式 */
.list-box {
  border-top: 1px solid #eee;
  padding-top: 24px;
}

/* 标签页样式 */
.tabs-nav {
  display: flex;
  margin-bottom: 16px;
  border: 1px solid #409EFF;
  border-radius: 4px;
}

.nav-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  background: #fff;
  cursor: pointer;  /*设置鼠标指针 */
  transition: all 0.3s;  /*添加过渡效果 */
}

.nav-item.active {
  background: #409EFF;
  color: #fff;
}


/* 学生项样式 */
.student-item {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 12px;
}

.student-item h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.student-item p {
  margin: 4px 0;
  color: #666;
  font-size: 14px;
}

/* 状态标签样式 */
.status-tag {
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
}

.status-tag.arrived {
  background: #52C41A;
  color: #fff;
}
</style>